<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MeetSmart - 新建预约</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <!-- 引入自定义CSS -->
    <link rel="stylesheet" th:href="@{/css/style.css}">

    <!-- 引入必要的JS库 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/zh.js"></script>

    <!-- 引入自定义JS -->
    <script th:src="@{/js/app.js}"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- 导航栏代码与dashboard.html相同 -->
</nav>

<div class="container mt-4">
    <h2><i class="bi bi-calendar-plus"></i> 新建预约</h2>

    <div class="card mt-4">
        <div class="card-header bg-primary text-white">
            <h5><i class="bi bi-info-circle"></i> 预约信息</h5>
        </div>
        <div class="card-body">
            <form th:action="@{/bookings}" method="post" th:object="${booking}">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label for="title" class="form-label">预约标题</label>
                        <input type="text" class="form-control" id="title" name="title" required>
                    </div>
                    <div class="col-md-6">
                        <label for="roomId" class="form-label">会议室</label>
                        <select id="roomId" name="roomId" class="form-select" required>
                            <option value="">请选择会议室</option>
                            <option th:each="room : ${rooms}" th:value="${room.id}" th:text="${room.name}"></option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="startTime" class="form-label">开始时间</label>
                        <input type="datetime-local" class="form-control" id="startTime" name="startTime" required>
                    </div>
                    <div class="col-md-6">
                        <label for="endTime" class="form-label">结束时间</label>
                        <input type="datetime-local" class="form-control" id="endTime" name="endTime" required>
                    </div>
                    <div class="col-12">
                        <label for="description" class="form-label">预约说明</label>
                        <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                    </div>
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary"><i class="bi bi-check-circle"></i> 提交预约</button>
                        <a th:href="@{/bookings}" class="btn btn-secondary ms-2"><i class="bi bi-x-circle"></i> 取消</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    // 初始化日期时间选择器
    flatpickr("#startTime", {
        enableTime: true,
        dateFormat: "Y-m-d H:i",
        minDate: "today"
    });

    flatpickr("#endTime", {
        enableTime: true,
        dateFormat: "Y-m-d H:i",
        minDate: "today"
    });
</script>
</body>
</html>